<template>
    <cell-wrapper
      v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
      :key="wrapperType"
      :wrapper-type="wrapperType"
      :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
      <!-- 默认状态 -->
      <text-display-cell
        v-if="!editState"
        :text="formatValue"
        :columnConfig="columnsConfig"
        v-bind="contentStyle"
      />
      <!-- 编辑状态 -->
      <a-input-number v-else :value="value" @change="handleValueChange" />
    </cell-wrapper>
  </template>
  
  <script>
    import { computed, defineComponent } from 'vue';
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
    import {
      addThousandsSeparatorToNumber,
      generateContentStyle,
      judgeCellEditable,
    } from '@/utils/index';
  
    export default defineComponent({
      name: 'NumberTableCell',
      components: {
        TextDisplayCell,
        CellWrapper,
      },
      inheritAttrs: false,
      props: {
        // 当前单元格的值
        value: {
          type: Number,
          default: () => {
            return null;
          },
        },
        // 单元格的默认样式
        defaultStyle: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格的条件样式配置
        conditionStyle: {
          type: Array,
          default: () => {
            return [];
          },
        },
        // 当前行的数据
        rowData: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
        conditionValueMap: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 格式化配置
        format: {
          type: String,
          default: () => {
            return '';
          },
        },
        // 当前列的配置
        columnsConfig: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前单元格是否处于编辑状态
        isEdit: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
      },
      emits: ['change'],
      setup(props, { emit }) {
        const editState = computed(() => {
          return (
            props.isEdit &&
            judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
          );
        });
        const formatValue = computed(() => {
          if (props.columnsConfig.contentConfig.format === 'THOUSANDS_SEPARATOR') {
            return addThousandsSeparatorToNumber(props.value);
          }
  
          return props.value;
        });
  
        // 内容显示的样式
        const contentStyle = computed(() => {
          return generateContentStyle(
            props.columnsConfig.contentConfig,
            props.rowData,
            props.conditionValueMap,
          );
        });
  
        function handleValueChange(value) {
          emit('change', value);
        }
  
        return {
          editState,
          contentStyle,
          formatValue,
          handleValueChange,
        };
      },
    });
  </script>
  